import React from 'react';
import Button from 'antd/lib/button';
import Form from 'antd/lib/form';
import Icon from 'antd/lib/icon';
import Input from 'antd/lib/input';
import Notification from 'antd/lib/notification';

const FormItem = Form.Item;

function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}

class HorizontalLoginForm extends React.Component {
  componentDidMount() {
    // To disabled submit button at the beginning.
    this.props.form.validateFields();
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);

        this.props.addNewModule(values).then((result)=>{
          if(!result.payload.data.success){
            Notification.error({
              message: payload.data.message
            });
            return
          }
          this.props.form.resetFields();
          this.props.form.validateFields();
          Notification.success({
            message: '新增模块成功！'
          });
        }).catch(e=>{
          debugger
        })

      }
    });
  }
  render() {
    const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched ,resetFields} = this.props.form;

    // Only show error after a field is touched.
    const userNameError = isFieldTouched('id') && getFieldError('id');
    const passwordError = isFieldTouched('name') && getFieldError('name');
    return (
      <Form layout="vertical" onSubmit={this.handleSubmit}>
        <FormItem
          validateStatus={userNameError ? 'error' : ''}
          help={userNameError || ''}
        >
          {getFieldDecorator('id', {
            rules: [{ required: true, message: '请输入模块ID，ID必须为数字' ,pattern:/^(\d)*$/}],
          })(
            <Input prefix={<Icon type="edit" style={{ fontSize: 13 }} />} placeholder="模块ID" />
          )}
        </FormItem>
        <FormItem
          validateStatus={passwordError ? 'error' : ''}
          help={passwordError || ''}
        >
          {getFieldDecorator('name', {
            rules: [{ required: true, message: '请输入模块名称' }],
          })(
            <Input prefix={<Icon type="edit" style={{ fontSize: 13 }} />}  placeholder="模块名称" />
          )}
        </FormItem>

        <FormItem>
          {getFieldDecorator('description', {
            rules: [{ required: false, message: '请输入文字描述' }],
          })(
            <Input prefix={<Icon type="edit" style={{ fontSize: 13 }} />}  type='textarea' placeholder="模块文字描述" />
          )}
        </FormItem>

        <FormItem>
          {getFieldDecorator('remark', {
            rules: [{ required: false, message: '请输入备注信息' }],
          })(
            <Input prefix={<Icon type="edit" style={{ fontSize: 13 }} />}  placeholder="备注信息" />
          )}
        </FormItem>

        <FormItem>
          <Button
            type="primary"
            htmlType="submit"
            disabled={hasErrors(getFieldsError())}
          >
            提交
          </Button>
        </FormItem>
      </Form>
    );
  }
}

export default   Form.create()(HorizontalLoginForm);
